<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>花间村 - 我的卡包</title>
    <link rel="stylesheet" href="{{ asset('css/wechat_service_account.css') }}">
    <style>
        .header {
            position: relative;
            padding-top: 10px;
            margin-bottom: 10px;
        }
        .back-btn {
            position: absolute;
            top: 15px;
            left: 10px;
            font-size: 16px;
            color: #333;
            text-decoration: none;
        }
        .page-title {
            text-align: center;
            font-size: 18px;
            margin: 0;
            padding: 10px 0;
        }
        .wallet-section {
            margin-bottom: 20px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            padding: 10px 15px;
            background: #f5f5f5;
            color: #666;
        }
        .card-item {
            background: #fff;
            margin-bottom: 10px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            padding: 15px;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
        }
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .card-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        .card-body {
            padding: 15px;
        }
        .card-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .info-label {
            color: #666;
        }
        .info-value {
            color: #333;
            font-weight: 500;
        }
        .no-data {
            text-align: center;
            padding: 40px 20px;
            color: #999;
            font-size: 14px;
        }
        .valid-badge {
            display: inline-block;
            background: #07C160;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        .expired-badge {
            display: inline-block;
            background: #999;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部返回按钮 -->
        <div class="header">
            <a href="javascript:history.back();" class="back-btn">&lt; 返回</a>
            <h1 class="page-title">我的卡包</h1>
        </div>

        <!-- 会员卡部分 -->
        <div class="wallet-section">
            <div class="section-title">我的会员卡</div>
            @if(!empty($memberCards) && count($memberCards) > 0)
                @foreach($memberCards as $card)
                    <div class="card-item">
                        <div class="card-header">
                            <div class="card-title">会员权益</div>
                            <div class="card-subtitle">
                                @php
                                    $metadata = is_string($card->metadata) ? json_decode($card->metadata, true) : (is_array($card->metadata) ? $card->metadata : ($card->metadata ? get_object_vars($card->metadata) : []));
                                @endphp
                                {{ $metadata['permission_level'] ?? '标准会员' }}
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="card-info">
                                <span class="info-label">会员时长</span>
                                <span class="info-value">{{ $metadata['days'] ?? 0 }}天</span>
                            </div>
                            <div class="card-info">
                                <span class="info-label">激活时间</span>
                                <span class="info-value">{{ is_string($card->used_at) ? \Carbon\Carbon::parse($card->used_at)->format('Y-m-d H:i') : $card->used_at->format('Y-m-d H:i') }}</span>
                            </div>
                            <div class="card-info">
                                <span class="info-label">到期时间</span>
                                <span class="info-value">{{ is_string($card->expired_at) ? \Carbon\Carbon::parse($card->expired_at)->format('Y-m-d H:i') : $card->expired_at->format('Y-m-d H:i') }}</span>
                            </div>
                            <div class="card-info">
                                <span class="info-label">状态</span>
                                @if((is_string($card->expired_at) ? \Carbon\Carbon::parse($card->expired_at) : $card->expired_at) > now())
                                    <span class="valid-badge">有效</span>
                                @else
                                    <span class="expired-badge">已过期</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="no-data">
                    <p>暂无会员卡</p>
                    <p style="margin-top: 10px;">
                        <a href="{{ route('wechat.service.account.redeem') }}" style="color: #ff6b6b; text-decoration: none;">
                            立即兑换会员权益
                        </a>
                    </p>
                </div>
            @endif
        </div>

        <!-- 兑换记录部分 -->
        <div class="wallet-section">
            <div class="section-title">兑换记录</div>
            @if(!empty($redemptionHistory) && count($redemptionHistory) > 0)
                @foreach($redemptionHistory as $record)
                    <div class="card-item">
                        <div class="card-body" style="border-bottom: none;">
                            <div class="card-info">
                                <span class="info-label">兑换码</span>
                                <span class="info-value">{{ substr($record->code, 0, 6) }}****</span>
                            </div>
                            <div class="card-info">
                                <span class="info-label">兑换类型</span>
                                <span class="info-value">
                                    @if($record->type == 'time_access')
                                        会员权益
                                    @elseif($record->type == 'product_exchange')
                                        商品兑换
                                    @elseif($record->type == 'discount')
                                        优惠券
                                    @endif
                                </span>
                            </div>
                            <div class="card-info">
                                <span class="info-label">兑换时间</span>
                                <span class="info-value">{{ is_string($record->used_at) ? \Carbon\Carbon::parse($record->used_at)->format('Y-m-d H:i') : $record->used_at->format('Y-m-d H:i') }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="no-data">暂无兑换记录</div>
            @endif
        </div>
    </div>

    <!-- 载入底部导航栏 -->
    @include('wechat.service_account.components.bottom_nav')
</body>

</html>